<template>
  <div class="p-4">
    <!-- 科目选择按钮组 -->
    <el-card class="mb-4">
      <div class="flex space-x-2">
        <el-button
          v-for="subject in subjects"
          :key="subject.key"
          :type="selectedSubject === subject.key ? 'primary' : 'default'"
          :style="selectedSubject === subject.key ? selectedButtonStyle : defaultButtonStyle"
          @click="selectSubject(subject.key)"
        >
          {{ subject.label }}
        </el-button>
      </div>
    </el-card>

    <!-- 班级选择按钮组 -->
    <el-card class="mb-4" :body-style="{ backgroundColor: 'rgb(245, 245, 245)' }">
      <div class="flex space-x-2">
        <el-button
          v-for="classItem in classes"
          :key="classItem"
          :type="selectedClass === classItem ? 'primary' : 'default'"
          @click="selectClass(classItem)"
        >
          {{ classItem }}
        </el-button>
      </div>
    </el-card>

    <!-- 搜索框 -->
    <div class="mb-4 flex space-x-2">
      <el-input
        v-model="searchQuery"
        placeholder="输入准考证号或姓名"
        clearable
        @clear="handleSearch"
        @input="handleSearch"
        style="width: 300px;"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      ref="scoreTable"
      :data="filteredData"
      style="width: 100%"
      height="750px"
      :default-sort="{ prop: 'totalScore', order: 'descending' }"
      highlight-current-row
    >
      <el-table-column type="index" label="序号" fixed="left" width="60" />
      <el-table-column prop="examNumber" label="准考证号" fixed="left" width="150" />
      <el-table-column prop="class" label="班级" fixed="left" width="100" />
      <el-table-column prop="name" label="姓名" fixed="left" width="120" />

      <el-table-column label="总分">
        <el-table-column prop="totalScore" label="分数" width="120" sortable />
        <el-table-column prop="totalSchoolRank" label="校次" width="120" sortable />
        <el-table-column prop="totalClassRank" label="班次" width="120" sortable />
      </el-table-column>

      <el-table-column
        v-for="subject in subjects.slice(1)"
        :key="subject.key"
        :label="subject.label"
        :ref="subject.key"
      >
        <el-table-column :prop="`${subject.key}Score`" label="分数" width="120" sortable />
        <el-table-column :prop="`${subject.key}SchoolRank`" label="校次" width="120" sortable />
        <el-table-column :prop="`${subject.key}ClassRank`" label="班次" width="120" sortable />
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue';

const subjects = [
  { key: 'total', label: '总分' },
  { key: 'chinese', label: '语文' },
  { key: 'math', label: '数学' },
  { key: 'english', label: '英语' },
  { key: 'physics', label: '物理' },
  { key: 'chemistry', label: '化学' },
  { key: 'biology', label: '生物' },
  { key: 'history', label: '历史' },
  { key: 'geography', label: '地理' },
  { key: 'politics', label: '政治' },
];

const classes = ['高三1班', '高三2班'];

const selectedSubject = ref('total');
const selectedClass = ref(classes[0]);
const searchQuery = ref('');

const selectedButtonStyle = {
  backgroundColor: 'rgb(48, 65, 86)',
  color: '#fff',
};

const defaultButtonStyle = {
  backgroundColor: 'rgb(255, 255, 255)',
  color: '#000',
};

const tableData = ref([
  // 在这里填入你的数据
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  },
  {
    examNumber: '20230001',
    class: '高三1班',
    name: '李明',
    totalScore: 620,
    totalSchoolRank: 1,
    totalClassRank: 1,
    chineseScore: 130,
    chineseSchoolRank: 2,
    chineseClassRank: 1,
    mathScore: 135,
    mathSchoolRank: 1,
    mathClassRank: 1,
    englishScore: 130,
    englishSchoolRank: 3,
    englishClassRank: 1,
    physicsScore: 90,
    physicsSchoolRank: 1,
    physicsClassRank: 1,
    chemistryScore: 80,
    chemistrySchoolRank: 1,
    chemistryClassRank: 1,
    biologyScore: 55,
    biologySchoolRank: 2,
    biologyClassRank: 1,
    historyScore: 0,
    historySchoolRank: 0,
    historyClassRank: 0,
    geographyScore: 0,
    geographySchoolRank: 0,
    geographyClassRank: 0,
    politicsScore: 0,
    politicsSchoolRank: 0,
    politicsClassRank: 0,
  }
  // 其他学生数据
]);

const filteredData = computed(() => {
  return tableData.value.filter((item) => {
    const matchesClass = item.class === selectedClass.value;
    const matchesSearch =
      item.examNumber.includes(searchQuery.value) ||
      item.name.includes(searchQuery.value);
    return matchesClass && matchesSearch;
  });
});

const selectSubject = async (subjectKey: string) => {
  selectedSubject.value = subjectKey;
  await nextTick();
  
  if (subjectKey === 'total') {
    // 滚动到表格顶部
    scoreTable.value?.$el.scrollTo({ left: 0, behavior: 'smooth' });
  } else {
    const column = scoreTable.value?.$refs[subjectKey]?.[0] as HTMLElement;
    if (column) {
      const left = column.offsetLeft;
      scoreTable.value?.$el.scrollTo({ left, behavior: 'smooth' });
    }
  }
};

const selectClass = (className: string) => {
  selectedClass.value = className;
};

const handleSearch = () => {
  // 搜索逻辑已经在filteredData中处理
};

const scoreTable = ref(null);

</script>

<style scoped>
</style>
